---
title: gluestack-ui Alert Component | Installation, Usage, and API

description: useBreakpointValue returns the value for the current breakpoint based on the provided responsive values object.

pageTitle: useBreakpointValue

pageDescription: useBreakpointValue returns the value for the current breakpoint based on the provided responsive values object.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Hooks/useBreakPointValue" />

import {
  VStack,
  Box,
  Text
} from '../../core-components/nativewind';
import { useBreakpointValue } from '../../core-components/hooks/use-break-point-value.ts';
import { transformedCode } from '../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  InlineCode,
  TableContainer,
  Tabs
} from '@gluestack/design-system';
import { CollapsibleCode } from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';

This is an illustration of **useBreakPointValue** hook.

<Wrapper>
  <CodePreview
    _rendererWrapper={{ px: '$2.5' }}
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      function App(){
         const flexDir = useBreakpointValue({
                default: "column",
                sm: "row",
              });
          return (
            <VStack
              style={{
                flexDirection: flexDir,
                gap: 10,
              }}
            > 
              <Box className={"justify-center items-center p-4 rounded bg-primary-500"}>
                <Text className="font-bold text-typography-0">Box 1</Text>
              </Box>
              <Box className={"justify-center items-center p-4 rounded bg-primary-600"}>
                <Text className="font-bold text-typography-0">Box 2</Text>
              </Box>
              <Box className={"justify-center items-center p-4 rounded bg-primary-700"}>
                <Text className="font-bold text-typography-0">Box 3</Text>
              </Box>
            </VStack>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        VStack,
        Box,
        Text,
        useBreakpointValue,
        Wrapper,
      },
      argsType: {
      },
    }}
  />
</Wrapper>

<br />

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add useBreakPointValue
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>


### Step 1: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx 
%%-- File: core-components/hooks/use-break-point-value.ts --%% 
```

</CollapsibleCode>

### Step 2: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { useBreakPointValue } from '@/components/hooks/use-break-point-value';
```

```jsx
const flexDir = useBreakpointValue({
                default: "column",
                sm: "row",
              });
```

### Hook Arguments

This section provides a comprehensive reference list for the hook arguments, detailing descriptions, properties, types, and default behavior for easy project integration.

#### useBreakPointValue

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>options</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Record<breakPoints | default,value>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

### Return Value

The **useBreakPointValue** hook returns value, based on given break point value object.